<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>根据节点取数据</title>
</head>

<body>
  <script>
    const data = {
      obj: {
        name: {
          e: '11111111'
        }
      }
    }
    let str = 'obj.name.e'
    /* reduce() 方法对数组中的每个元素按序执行一个由您提供的 reducer 函数，
    每一次运行 reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。
    第一次执行回调函数时，不存在“上一次的计算结果”。如果需要回调函数从数组索引为 0 的元素开始执行，
    则需要传递初始值。否则，数组索引为 0 的元素将被作为初始值 initialValue，迭代器将从第二个元素开始执行（索引为 1 而不是 0）。 */
    // 这里实现从节点取到值的核心就是，根据{{}}中的写法拿到data对象的取值路径后，然后通过reduce方法循环取值，每次循环相当于往对象内部取了一层
    let value = str.split('.').reduce((total, current) => {
      return total[current]
    }, data)
    console.log(value);
  </script>
</body>

</html>